<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../day03_jQuery/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function () {
//左移
        $("#toLeft").click(function () {
           $("#right option:selected").appendTo("#left");
           // $("#right option:selected").remove();
        });
        //左移全部
        $("#toLeftAll").click(function () {
            $("#right option").appendTo("#left");
           // $("#right option").hide();
        });
        //右移
        $("#toRight").click(function () {
            $("#left option:selected").appendTo("#right");
            //$("#left option:selected").remove();
        });

        //右移全部
        $("#toRightAll").click(function () {

            $("#left option").appendTo("#right");
           // $("#left option").hide();
        })
    });
</script>
</head>
<body>

    <select id="left" multiple style="height: 200px; width: 200px;">
        <option>张三</option>
        <option>李四</option>
        <option>王五</option>
        <option>赵六</option>
        <option>田七</option>
        <option>崔八</option>
        <option>刘能</option>
    </select>
    <input type="button" value="左移" id="toLeft">
    <input type="button" value="左移全部" id="toLeftAll">
    <input type="button" value="右移" id="toRight">
    <input type="button" value="右移全部" id="toRightAll">
    <select id="right" multiple style="height: 200px; width: 200px;">
        <option>小明</option>
        <option>小红</option>
        <option>小黑</option>
        <option>小花</option>
        <option>小刚</option>
        <option>小米</option>
        <option>小能</option>
    </select>

</body>
</html>